<template>
    <div class="app-container">
    <div class="db">
      <div class="tj">
        <i class="el-icon-document-add"></i> 添加
      </div>
      <div class="fh">
        <el-button @click="fh">返回</el-button>
      </div>
    </div>
    <el-divider></el-divider>
      <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增</el-button>
      </el-col>
      </el-row>
      <el-row :gutter="10" class="mb8">
      商家名称：
        <el-select v-model="shopId" placeholder="请选择商家名称" style="margin-bottom: 40rpx;">
            <el-option
              v-for="dict in shopList"
              :key="dict.id"
              :label="dict.name"
              :value="dict.id"
            ></el-option>
          </el-select>
        </el-row>
    <el-table :data="itemsList">
      <el-table-column label="服务项目" align="center" prop="name">
        <template slot-scope="scope">
          <el-input v-model="scope.row.name" placeholder="请输入服务项目" />
        </template>
      </el-table-column>
      <el-table-column label="服务分类" align="center" prop="serviceSortId">
        <template slot-scope="scope">
            <el-select v-model="scope.row.serviceSortId" placeholder="请选择商家名称">
            <el-option
              v-for="dict in sortList"
              :key="dict.id"
              :label="dict.name"
              :value="dict.id"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="原价" align="center" prop="oldPrice" >
        <template slot-scope="{ row }">
            <el-input v-model="row.oldPrice" placeholder="原价" />
        </template>
      </el-table-column>
      <el-table-column label="原价" align="center" prop="newPrice" >
        <template slot-scope="{ row }">
            <el-input v-model="row.newPrice" placeholder="现价" />
        </template>
      </el-table-column>
      <el-table-column label="服务介绍" align="center" prop="intro" >
        <template slot-scope="{ row }">
        <el-input v-model="row.intro" placeholder="服务介绍" />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-divider></el-divider>
    <el-row>
        <el-button size="medium" @click="fh" >取消</el-button>
        
        <el-button size="medium" @click="fb" >确定发布</el-button>
    </el-row>
    </div>
  </template>
  
  <script>
  import { addItemsList } from "@/api/service/items";
  import { listShop } from "@/api/active/shop";
  import { listSort } from "@/api/service/sort";
  export default {
    name: "Items",
    dicts: ['sys_user_sex'],
    data() {
        return {
            itemsList:[
                {shopId:'',name:'',serviceSortId:'',oldPrice:'',newPrice:'',intro:''}
            ],
            shopId:'',
            shopList:'',
            shopMap:[],
            sortList:'',
            sortMap:[],
            // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 9999,
        name: null,
        sort: null,
      },
        }
    },
    created() {
      // 检查路由的查询参数  
    if (this.$route.query.reload) {  
      // 清除查询参数（可选）  
      this.getlistShop();
    } else {  
      // 正常加载数据（如果需要）  
      this.getlistShop();
    }  
    },
    methods:{
    getlistShop() {
      /** 查询商户管理列表 */
      listShop(this.queryParams).then(response => {
        this.shopList = response.rows;
      // 获取数据成功
       for (let index = 0; index < this.shopList.length; index++) {
          this.$set(this.shopMap, this.shopList[index].id + '', this.shopList[index].name)
        }
        // console.log(this.shopMap);
      });
      /** 查询服务类别列表 */
      listSort(this.queryParams).then(response => {
        this.sortList = response.rows;
         // 获取数据成功
       for (let index = 0; index < this.sortList.length; index++) {
          this.$set(this.sortMap, this.sortList[index].id + '', this.sortList[index].name)
        }
      // console.log(this.sortMap);
      });   
    },
        handleAdd(){
            var item={
              shopId:'',
                name:'',
                serviceSortId:'',
                oldPrice:'',
                newPrice:'',
                intro:''
            }
            this.itemsList.push(item);
        },
        fh(){
      // this.$router.back()
      this.$router.push({ path: '/service/items', query: { reload: true } }); 
      },
      handleDelete(scope){
      // 移除指定索引的元素
      //  console.log(scope.$index);
        this.itemsList.splice(scope.$index, 1);
      },
      fb(){
        for(var i in this.itemsList){
          // console.log(this.itemsList[i]);
          this.itemsList[i].shopId=this.shopId;
        }
        var than =this;
        // console.log(this.itemsList);
        addItemsList(than.itemsList).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.fh();
            });

      }
    }
  };
  </script>

<style>
 .db{
  display: flex;
  justify-content: space-between;
 }
</style>
  